import React, { Component } from 'react'
import {
  Platform,
  StyleSheet,
  Text,
  TextInput,
  Image,
  Button,
  ImageBackground,
  View,
  Dimensions
} from 'react-native'
import px2dp, { deviceWidth, deviceHeight} from '../../util/px2dp'

export default class SignInPage extends Component{
  render() {
    const { navigate } = this.props.navigation
    var keys = Object.keys(Image.resizeMode).join('  ')
    console.log(keys)
    return (
      <View style={styles.container}>
        <View style={styles.topSlideImageView}>
          <Image
            style={styles.topSlideImage}
            resizeMode={Image.resizeMode.stretch}
            source={require('../../image/login/background.png')}>
          </Image>
        </View>
        <View style={styles.rows}>
          <Image
            style={styles.icon}
            source={require('../../image/login/user.png')}
          />
          <TextInput
            underlineColorAndroid='transparent'
            style={styles.inputView}
            placeholder='请输入用户名或手机号码'
            />
        </View>
        <View style={styles.rows}>
          <Image
            style={styles.icon}
            source={require('../../image/login/lock.png')}
            />
          <TextInput
            underlineColorAndroid='transparent'
            secureTextEntry={true}
            style={styles.inputView}
            placeholder='密码'
          />
        </View>
        <View style={styles.bottomview}>
          <View style={styles.bottomleftbtnview}>
            <Text style={styles.bottomleftbtn} >忘记密码？</Text>
          </View>
          <View style={styles.bottomrightbtnview}>
            <Text style={styles.bottomrightbtn} >短信验证登陆</Text>
          </View>
        </View>
        <View style={styles.loginBtnView}>
          <View style={styles.buttonview}>
            <Text
              style={styles.loginBtnText}
              onPress={() => navigate('MainPage')}>
              登 录
            </Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  topSlideImageView:{

  },
  topSlideImage: {
    alignSelf: 'center',
    width: deviceWidth,
    height: px2dp(258)
  },
  rows: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    paddingTop: 12,
    paddingBottom: 11,
    borderBottomWidth: 1,
    borderBottomColor: '#e2e2e2'
  },
  icon: {
    width: 24,
    height: 24,
    marginRight: 15,
    alignSelf: 'center'
  },
  inputView: {
    flex: 0.8,
    fontFamily: 'PingFang - SC - Light',
    fontSize: 15,
    textAlign: 'left',
    backgroundColor: 'white',
    justifyContent: 'center',
    alignSelf: 'center'
  },
  loginBtnView: {
    flexDirection: 'row'
  },
  buttonview: {
    flex: 0.8,
    height: 50,
    flexDirection: 'row',
    backgroundColor: 'rgba(16, 78, 151,1)',
    borderRadius: 6,
    justifyContent: 'center'
  },
  loginBtnText: {
    fontSize: 18,
    color: '#fff',
    justifyContent: 'center',
    alignSelf: 'center'
  },
  bottomview: {
    flex: 0.3,
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 15,
    marginBottom: 15,
    paddingLeft: 35,
    paddingRight: 35
  },
  bottomleftbtnview: {
    flex: 1,
    height: 50,
    alignItems: 'flex-start',
    justifyContent: 'center'
  },
  bottomrightbtnview: {
    flex: 1,
    height: 50,
    alignItems: 'flex-end',
    justifyContent: 'center',
  },
  bottomleftbtn: {
    color: '#000000',
    fontSize: 14,
  },
  bottomrightbtn: {
    color: '#104e97',
    fontSize: 14
  }
})
